<template>
	<view>
		<view class="ipt-list tp-fyc tp-mt20">
			<!-- 手机号码S -->
			<view class="ipt-item tp-mb20 tp-bgf tp-h98 tp-fxc" v-if="type != 1">
				<view class="icon">
					<image src="../static/imgs/icons/phone-icon.png" mode=""></image>
				</view>
				<view class="input">
					<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码" />
				</view>
			</view>
			<!-- 手机号码E -->

			<!-- 验证码S -->
			<view class="ipt-item tp-mb20 tp-bgf tp-h98 tp-fxc" v-if="type != 1">
				<view class="icon">
					<image src="../static/imgs/icons/code-icon.png" mode=""></image>
				</view>
				<view class="input">
					<input type="number" v-model="code" maxlength="6" placeholder="请输入验证码" />
				</view>
				<view v-if="!time" class="getcodebtn tp-pyc" @click="getCode">获取验证码</view>
				<view v-else class="getcodebtn tp-pyc">{{time}}</view>
			</view>
			<!-- 验证码E -->

			<!-- 旧密码S -->
			<view class="ipt-item tp-mb20 tp-bgf tp-h98 tp-fxc" v-if="type == 1">
				<view class="icon">
					<image src="../static/imgs/icons/lock-icon.png" mode=""></image>
				</view>
				<view class="input">
					<input type="password" v-model="oldPwd" placeholder="请输入旧密码(六位数字)" maxlength="6" @input="verticifationPwd" />
				</view>
			</view>
			<!-- 旧密码E -->

			<!-- 新密码S -->
			<view class="ipt-item tp-mb20 tp-bgf tp-h98 tp-fxc">
				<view class="icon">
					<image src="../static/imgs/icons/lock-icon.png" mode=""></image>
				</view>
				<view class="input">
					<input type="password" v-model="newPwd" placeholder="请输入新密码(六位数字)" maxlength="6" @input="verticifationPwd" />
				</view>
			</view>
			<!-- 新密码E -->

			<!-- 再次输入新密码S -->
			<view class="ipt-item tp-mb20 tp-bgf tp-h98 tp-fxc">
				<view class="icon">
					<image src="../static/imgs/icons/lock-icon.png" mode=""></image>
				</view>
				<view class="input">
					<input type="password" v-model="reNewPwd" maxlength="6" placeholder="请再次输入新密码" />
				</view>
			</view>
			<!-- 再次输入新密码E -->

			<!-- 身份证后6位S -->
			<view class="ipt-item tp-mb20 tp-bgf tp-h98 tp-fxc" v-if="type == 2">
				<view class="icon">
					<image src="../static/imgs/icons/IDs.png" mode=""></image>
				</view>
				<view class="input">
					<input type="idcard" v-model="idCardBackSix" maxlength="6" placeholder="请输入证件号后6位" />
				</view>
			</view>
			<!-- 身份证后6位 E -->
		</view>
		<view class="tp-w690" v-if="type == 1">
			<text class="tp-fz28 tp-lh64" style="color: #FFB03C;" @click="forgetPwd">忘记密码？</text>
		</view>
		<button class="common-btn" @click="confirmEditPwd">确定</button>
	</view>
</template>

<script>
	import $DB from '@/utils/debounce.js'
	export default {
		data() {
			return {
				type: 0, // 修改密码场景 (0.设置密码 1.修改密码 2.忘记密码)
				phone: '', // 手机号
				code: '', // 验证码
				oldPwd: '', // 旧密码
				newPwd: '', // 新密码
				reNewPwd: '', // 重复新密码
				idCardBackSix: '', // 身份证后6位
				time: 0, // 倒计时
				timer: null, // 倒计时定时器
				backUrl: '', // 要返回的url地址
			};
		},

		onLoad(opt) { // 获取返回参数, 默认为返回上一层
			if (opt.backUrl) {
				this.backUrl = opt.backUrl
			}
			this.type = opt.type
		},
		onShow() {
			this.pageTitle()
		},

		watch: {
			time(val) {
				if (val <= 0) {
					this.time = 0
					clearInterval(this.timer)
				}
			}
		},

		methods: {
			getCode() { // 通过手机号获取验证码
				if (!this.phone) {
					return uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
				}
				this.$http.get(this.$api.sendMsg, {
					type: 1,
					phone: this.phone
				}).then(res => {
					if (res.code == 200) {
						this.time = 59
						this.timer = setInterval(() => {
							this.time--
						}, 1000)
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			confirmEditPwd: $DB(function() {
				if (!this.phone && this.type != 1) {
					return uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
				}
				if (!this.code && this.type != 1) {
					return uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
				}
				if (!this.oldPwd && this.type == 1) {
					return uni.showToast({
						icon: 'none',
						title: '请输入旧密码'
					})
				}
				if (!this.newPwd) {
					return uni.showToast({
						icon: 'none',
						title: '请输入新密码'
					})
				}
				if (!this.reNewPwd) {
					return uni.showToast({
						icon: 'none',
						title: '请再次输入新密码'
					})
				}
				if (this.newPwd !== this.reNewPwd) {
					return uni.showToast({
						icon: 'none',
						title: '两次密码不一致'
					})
				}
				if (this.newPwd.length !== 6) {
					return uni.showToast({
						icon: 'none',
						title: '请输入6位纯数字密码'
					})
				}
				if (this.idCardBackSix.length !== 6 && this.type == 2) {
					return uni.showToast({
						icon: 'none',
						title: '请输入身份证后6位'
					})
				}
				this.$http.post(this.$api.editPwd, {
					phone: this.phone,
					verify: this.code,
					oldPwd: this.oldPwd,
					pwd: this.newPwd,
					confirm: this.reNewPwd,
					idCardBackSix: this.idCardBackSix,
					type: this.type
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg
						});
						setTimeout(() => {
							if (this.backUrl) { // 如果有要返回的url, 就返回到url
								uni.navigateBack({
									delta: 1
								});
							} else { // 如果没有要返回的url,默认返回上一步
								uni.navigateBack({
									delta: 1
								});
							}
							this.phone = this.reNewPwd = this.code = this.newPwd = ''
						}, 1500)
					}
				})
			}),

			verticifationPwd() {
				if (this.newPwd.length > 6) {
					uni.showToast({
						icon: 'none',
						title: '请输入6位纯数字密码'
					});
					this.newPwd = ''
				}
			},
			// 忘记密码
			forgetPwd() {
				uni.redirectTo({
					url: './editPayPwd?type=2'
				});
			},
			// 页面标题
			pageTitle() {
				if (this.type == 0) {
					uni.setNavigationBarTitle({
						title: '设置密码'
					});
				} else if (this.type == 1) {
					uni.setNavigationBarTitle({
						title: '修改密码'
					});
				} else if (this.type == 2) {
					uni.setNavigationBarTitle({
						title: '忘记密码'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ipt-list {
		.ipt-item {
			width: 690rpx;
			font-size: 30rpx;
			position: relative;
			border-radius: 8rpx;

			.icon {
				width: 48rpx;
				height: 48rpx;
				margin: 0 20rpx;
			}

			.input {
				flex: 1;
				padding: 0 120rpx 0 0;
			}

			.getcodebtn {
				right: 20rpx;
				padding: 6rpx 10rpx;
				min-width: 160rpx;
				text-align: center;
				border: 1px solid $blue;
				color: $blue;
				z-index: 3;
				border-radius: 8rpx;
			}
		}
	}

	.common-btn {
		box-shadow: none;
		width: 580rpx;
		margin-top: 80rpx;
	}
</style>
